import React, { Component } from "react";
import { Button, message, Tooltip, Input, Table } from "antd";
import { connect } from "dva";
import { SearchOutlined } from "@ant-design/icons";
import QrCode from "qrcode-reader";
import styles from "./style.less";
import codePng from "./code.jpg";
import QRCode from "qrcode.react";
import Request, { Delete, Get } from "@/utils/request";
import LogoPng from "@/assets/images/logo.png";
@connect(({ mShanghuAnddhlb }) => mShanghuAnddhlb)
class Page extends Component {
  state = {
    id: this.props.match.params.id,
    detail: null,
    phone: "",
    query: false,
    total_count: 0,
    list: []
  };
  componentDidMount() {
    document.getElementById("root").style.minWidth = window.screen.width + "px";
    document.getElementById("root").style.width = window.screen.width + "px";
    const { dispatch } = this.props;
    dispatch({
      type: "mShanghuAnddhlb/fetch"
    });
  }
  getInfo() {
    if (this.state.phone == "") {
      message.error("请输入手机号");
      return;
    }
    Request("/psy/mss/lottery/query", {
      phones: [this.state.phone],
      serial_nos: [],
      draw_zones: ["北京SKP", "SKP-S"],
      shop_ids: [],
      states: ["未领取", "已领取"],
      prize_states: ["未使用", "已使用"],
      k: "",
      count: 1000,
      offset: 0
    }).then(res => {
      this.setState({
        list: res.data.data || [],
        total_count: res.data.total_count,
        query: true
      });
    });
  }
  render() {
    const { text } = this.props;
    const { query, list } = this.state;
    const columns = [
      {
        title: "时间",
        dataIndex: "draw_date",
        key: "draw_date"
      },
      {
        title: "奖品",
        dataIndex: "prize",
        key: "prize",
        render: (text, row, index) => {
          return <div>{row.prize.name}</div>;
        }
      },
      {
        title: "操作",
        dataIndex: "prize_state",
        key: "prize_state",
        render: (text, row, index) => {
          return (
            <div
              onClick={() => {
                if (row.prize.name !== "未中奖") {
                   window.open(window.location.origin + "/jpmobile/#/" + row.sha);
                }
              }}
            >
              {text == "未使用" ? (
                <span className="link">查看</span>
              ) : (
                <span>已使用</span>
              )}
            </div>
          );
        }
      }
    ];
    return (
      <div>
        {!query && (
          <div className={styles.loginBg}>
            <div className={styles.loginInfo}>
              <div className={styles.loginDesc}>输入手机号查询</div>
              <div className={styles.login_item}>
                <div className={styles.login_label}>手机号</div>
                <Input
                  onChange={e => this.setState({ phone: e.target.value })}
                  placeholder="请输入内容"
                />
              </div>
            </div>
            <div className={styles.login_action}>
              <div className="btn_wrap login_wrap">
                <div
                  onClick={() => this.getInfo()}
                  className={styles.login_btn}
                >
                  查询
                </div>
              </div>
            </div>
          </div>
        )}
        {query && (
          <div>
            <div className={styles.queryPhone}>{this.state.phone}</div>
            <Table dataSource={list} pagination={false} columns={columns} />
          </div>
        )}
      </div>
    );
  }
}

export default Page;
